import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, TouchableOpacity} from  'react-native';
import CommonCell from  './MiddleCommonView';
import BottomCommonCell from './BottomCommonCell';
let jsonData = require('../../Data/HomeTopMiddleLeft.json');
let jsonData2 = require('../../Data/XMG_Home_D4.json');
let imageData = [require('../../img/tttj.png'), require('../../img/yyms.png')];
let dimension = require('Dimensions');
let mdqg = require('../../img/mdqg.png');
let yyms = require('../../img/yyms.png');
let world = require('../../img/free/world.png');
let {width, height} = dimension.get('window');
let imageH = width / 4;
export default class HomeMiddleView extends Component {
    constructor(props) {
        super(props);
        HomeMiddleView.renderBottom = HomeMiddleView.renderBottom.bind(this);
    }

    render() {
        return (
            <View style={{backgroundColor:'gray',marginTop:20}}>
                <BottomCommonCell leftIcon={world} leftTitle='活动' rightTitle='查看更多'/>
                <View style={styles.container}>
                    {HomeMiddleView.renderLeftView()}
                    <View>
                        {HomeMiddleView.renderRightView()}
                    </View>
                </View>
                {HomeMiddleView.renderBottom()}
            </View>
        )
    }

    static renderLeftView() {
        let rightData = jsonData.dataLeft[0];
        return (
            <TouchableOpacity onPress={()=>{alert("asd")}}>
                <View style={styles.leftViewStyle}>
                    <Image source={mdqg} style={styles.leftImageStyle}/>
                    <Image source={yyms} style={styles.leftImageStyle}/>
                    <Text style={{color:'gray'}}>{rightData.title}</Text>
                    <View style={{flexDirection:'row',marginTop:5}}>
                        <Text style={{color:'blue',marginRight:5}}>{rightData.price}</Text>
                        <Text style={{color:'orange',backgroundColor:'yellow'}}>{rightData.sale}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    static renderRightView() {
        let itemArr = [];
        let rightData = jsonData.dataRight;
        for (let i = 0; i < rightData.length; i++) {
            let data = rightData[i];
            itemArr.push(
                <CommonCell key={i} title={data.title} image={imageData[i]}
                            subTitle={data.subTitle} titleColor={data.titleColor}/>
            )
        }
        return itemArr;
    }

    static renderBottom() {
        return (
            <View>
                <View style={styles.bottomViewStyle}>
                    {this.renderBottom2()}
                </View>
            </View>

        )
    }

    renderBottom2() {
        let itemArr = [];
        let dataArr = jsonData2.data;
        for (let i = 0; i < dataArr.length; i++) {
            let data1 = dataArr[i];
            itemArr.push(
                <CommonCell key={i}
                            title={data1.maintitle}
                            image={imageData[1]}
                            subTitle={data1.deputytitle}
                            titleColor={data1.typeface_color}
                            tplurl={data1.tplurl}
                            callBackClickCell={(data)=>this.popToTopView(data)}
                />
            )
        }
        return itemArr;
    }

    popToTopView(data) {
        // 继续执行回调函数
        this.props.popTopHome(data);
    }
}
HomeMiddleView.propTypes = {
    popTopHome: React.PropTypes.func
};
HomeMiddleView.defaultProps = {
    popTopHome: null
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row'
    },
    leftImageStyle: {
        width: 120,
        height: 30,
        resizeMode: 'contain'
    },
    leftViewStyle: {
        width: width / 2,
        height: 119,
        backgroundColor: 'white',
        marginRight: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }, bottomViewStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});
